import { useState } from "react";

function BaziForm({ onGenerateBazi }) {
    const [maleName, setMaleName] = useState("");
    const [femaleName, setFemaleName] = useState("");
    const [maleBirthDate, setMaleBirthDate] = useState("");
    const [maleBirthTime, setMaleBirthTime] = useState("");
    const [femaleBirthDate, setFemaleBirthDate] = useState("");
    const [femaleBirthTime, setFemaleBirthTime] = useState("");
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState("");

    const handleSubmit = async (e) => {
        e.preventDefault();
        setLoading(true);
        setError("");
        try {
            if (!maleName || !maleBirthDate || !maleBirthTime || 
                !femaleName || !femaleBirthDate || !femaleBirthTime) {
                throw new Error("请填写完整的姓名、出生日期和时辰");
            }

            const maleDateObj = new Date(maleBirthDate);
            const femaleDateObj = new Date(femaleBirthDate);
            if (isNaN(maleDateObj.getTime()) || isNaN(femaleDateObj.getTime())) {
                throw new Error("出生日期格式不正确，请选择有效日期");
            }

            const [maleHour, maleMinute] = maleBirthTime.split(":").map(Number);
            const [femaleHour, femaleMinute] = femaleBirthTime.split(":").map(Number);
            if (isNaN(maleHour) || isNaN(maleMinute) || maleHour < 0 || maleHour > 23 || maleMinute < 0 || maleMinute > 59 ||
                isNaN(femaleHour) || isNaN(femaleMinute) || femaleHour < 0 || femaleHour > 23 || femaleMinute < 0 || femaleMinute > 59) {
                throw new Error("出生时辰格式不正确，请使用 HH:MM 格式（例如 12:30）");
            }

            const maleResult = await onGenerateBazi(maleName, "male", maleBirthDate, maleBirthTime);
            const femaleResult = await onGenerateBazi(femaleName, "female", femaleBirthDate, femaleBirthTime);
            
            return { maleResult, femaleResult };
        } catch (err) {
            setError(err.message);
        } finally {
            setLoading(false);
        }
    };

    return (
        <div style={{ padding: "20px", marginTop: "30px", border: "1px solid #e0e0e0", borderRadius: "8px", width: "100%" }}>
            <h2 style={{ textAlign: "center", marginBottom: "20px" }}>八字排盘表单</h2>

            <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: "15px" }}>
                <div style={{ borderBottom: "1px solid #e0e0e0", paddingBottom: "15px" }}>
                    <h3 style={{ marginBottom: "15px" }}>男方信息</h3>
                    <div>
                        <label style={{ fontSize: "16px", fontWeight: "500" }}>姓名：</label>
                        <input
                            type="text"
                            value={maleName}
                            onChange={(e) => setMaleName(e.target.value)}
                            required
                            style={{ padding: "10px", borderRadius: "8px", border: "1px solid #e0e0e0", fontSize: "16px" }}
                        />
                    </div>
                    <div>
                        <label style={{ fontSize: "16px", fontWeight: "500" }}>出生日期：</label>
                        <input
                            type="date"
                            value={maleBirthDate}
                            onChange={(e) => setMaleBirthDate(e.target.value)}
                            required
                            style={{ padding: "10px", borderRadius: "8px", border: "1px solid #e0e0e0", fontSize: "16px" }}
                        />
                    </div>
                    <div>
                        <label style={{ fontSize: "16px", fontWeight: "500" }}>出生时辰：</label>
                        <input
                            type="time"
                            value={maleBirthTime}
                            onChange={(e) => setMaleBirthTime(e.target.value)}
                            required
                            style={{ padding: "10px", borderRadius: "8px", border: "1px solid #e0e0e0", fontSize: "16px" }}
                        />
                    </div>
                </div>

                <div style={{ paddingTop: "15px" }}>
                    <h3 style={{ marginBottom: "15px" }}>女方信息</h3>
                    <div>
                        <label style={{ fontSize: "16px", fontWeight: "500" }}>姓名：</label>
                        <input
                            type="text"
                            value={femaleName}
                            onChange={(e) => setFemaleName(e.target.value)}
                            required
                            style={{ padding: "10px", borderRadius: "8px", border: "1px solid #e0e0e0", fontSize: "16px" }}
                        />
                    </div>
                    <div>
                        <label style={{ fontSize: "16px", fontWeight: "500" }}>出生日期：</label>
                        <input
                            type="date"
                            value={femaleBirthDate}
                            onChange={(e) => setFemaleBirthDate(e.target.value)}
                            required
                            style={{ padding: "10px", borderRadius: "8px", border: "1px solid #e0e0e0", fontSize: "16px" }}
                        />
                    </div>
                    <div>
                        <label style={{ fontSize: "16px", fontWeight: "500" }}>出生时辰：</label>
                        <input
                            type="time"
                            value={femaleBirthTime}
                            onChange={(e) => setFemaleBirthTime(e.target.value)}
                            required
                            style={{ padding: "10px", borderRadius: "8px", border: "1px solid #e0e0e0", fontSize: "16px" }}
                        />
                    </div>
                </div>

                <button
                    type="submit"
                    disabled={loading}
                    style={{
                        padding: "12px",
                        borderRadius: "8px",
                        border: "none",
                        backgroundColor: "#1890ff",
                        color: "white",
                        fontSize: "18px",
                        fontWeight: "600",
                        cursor: "pointer",
                        opacity: loading ? 0.6 : 1,
                        marginTop: "20px"
                    }}
                >
                    {loading ? "计算中..." : "立即生成八字排盘"}
                </button>

                {error && (
                    <span style={{ color: "red", fontSize: "16px", marginTop: "10px", alignSelf: "flex-start" }}>
                        {error}
                    </span>
                )}
            </form>
        </div>
    );
}

export default BaziForm;